<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: David
  Date: 2016/11/17
  Time: 15:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../include/head.jsp">
    <jsp:param name="title" value="数据库备份管理"/>
</jsp:include>
<link rel="stylesheet" href="/css/select2.css">
<jsp:include page="../include/admin_header.jsp"/>

<jsp:include page="../include/admin_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <div style="margin-top: 10px">
            <input type="checkbox" style="margin-right: 8px;"><spring:message code="label.admin.data.enable.backup.plan"/>
        </div>
    </section>
    <section class="content">
        <div class="box box-primary complete" style="position: relative">
            <div class="box-body">
                <div style="padding: 5px 10px;">
                    <div><spring:message code="label.admin.data.backup.full.backup"/></div>
                    <div style="margin-top: 10px;">
                        <div class="row">
                            <div class="col-md-4 col-sm-4" style="margin: 10px 0">
                                <select id="typeSelect" style="min-width: 120px;max-width: 220px;" onchange="changeTime(this)">
                                    <option value="week"><spring:message code="label.week"/> </option>
                                    <option value="month"><spring:message code="label.month"/></option>
                                </select>
                            </div>
                            <div class="col-md-8 col-sm-8" style="margin: 10px 0">
                                <select id="timeSelect" style="width: 100px;">
                                    <option value="00:00" selected="selected">00:00</option>
                                    <option value="01:00">01:00</option>
                                    <option value="02:00">02:00</option>
                                    <option value="03:00">03:00</option>
                                    <option value="04:00">04:00</option>
                                    <option value="05:00">05:00</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="planBox">
                    </div>
                </div>
            </div>
        </div>
        <div class="box box-primary differences" style="position: relative">
            <div class="box-body">
                <div style="padding: 5px 10px;">
                    <div><spring:message code="label.admin.data.backup.differential.backup"/></div>
                    <div style="margin-top: 10px;">
                        <div class="row">
                            <div class="col-md-4 col-sm-4" style="margin: 10px 0">
                                <div><spring:message code="label.week"/></div>
                            </div>
                            <div class="col-md-8 col-sm-8" style="margin: 10px 0">
                                <select id="diffTimeSelect" style="width: 100px;">
                                    <option value="00:00" selected="selected">00:00</option>
                                    <option value="01:00">01:00</option>
                                    <option value="02:00">02:00</option>
                                    <option value="03:00">03:00</option>
                                    <option value="04:00">04:00</option>
                                    <option value="05:00">05:00</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="diffPlanBox">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-offset-4" style="padding-top:70px">
            <a id="sure" class="solid-button-blue" href="javascript:;"
               style="margin-right: 30px"><spring:message code="label.save"/></a>
            <a id="cancel" class="solid-button-orange" href="javascript:history.back(-1)"><spring:message code="label.cancel"/></a>
        </div>
    </section>
</div>
<jsp:include page="../include/foot.jsp"/>
<script src="/js/select2.full.min.js"></script>
<script type="text/html" id="maskTemplate">
    <div class="boxMask"
         style="position: absolute;top: -3px;border-radius:3px;background-color: #000;opacity: 0.4;width: 100%;z-index: 100;"></div>
</script>

<script type="text/html" id="week">
    <div class="sie-flex-box" style="line-height: 16px;">
        <div class="sie-flex-item item-access" data-value="MON">
            <i class="sie-checkbox checked"></i><span><spring:message code="label.monday"/></span>
        </div>
        <div class="sie-flex-item item-access" data-value="TUE">
            <i class="sie-checkbox checked"></i><span><spring:message code="label.tuesday"/></span>
        </div>
        <div class="sie-flex-item item-access" data-value="WED">
            <i class="sie-checkbox checked"></i><span><spring:message code="label.wednesday"/></span>
        </div>
        <div class="sie-flex-item item-access" data-value="THU">
            <i class="sie-checkbox checked"></i><span><spring:message code="label.thursday"/></span>
        </div>
        <div class="sie-flex-item item-access" data-value="FRI">
            <i class="sie-checkbox checked"></i><span><spring:message code="label.friday"/></span>
        </div>
        <div class="sie-flex-item item-access" data-value="SAT">
            <i class="sie-checkbox checked"></i><span><spring:message code="label.saturday"/></span>
        </div>
        <div class="sie-flex-item item-access" data-value="SUN">
            <i class="sie-checkbox checked"></i><span><spring:message code="label.sunday"/></span>
        </div>
    </div>
</script>

<script type="text/html" id="month">
    <div class="row" style="margin-left: -25px;">
        <div class="col-lg-8 col-md-10 col-sm-12">
            <span class="month-item item-access" data-value="1">1</span>
            <span class="month-item item-access" data-value="2">2</span>
            <span class="month-item item-access" data-value="3">3</span>
            <span class="month-item item-access" data-value="4">4</span>
            <span class="month-item item-access" data-value="5">5</span>
            <span class="month-item item-access" data-value="6">6</span>
            <span class="month-item item-access" data-value="7">7</span>
            <span class="month-item item-access" data-value="8">8</span>
            <span class="month-item item-access" data-value="9">9</span>
            <span class="month-item item-access" data-value="10">10</span>
            <span class="month-item item-access" data-value="11">11</span>
            <span class="month-item item-access" data-value="12">12</span>
            <span class="month-item item-access" data-value="13">13</span>
            <span class="month-item item-access" data-value="14">14</span>
            <span class="month-item item-access" data-value="15">15</span>
            <span class="month-item item-access" data-value="16">16</span>
            <span class="month-item item-access" data-value="17">17</span>
            <span class="month-item item-access" data-value="18">18</span>
            <span class="month-item item-access" data-value="19">19</span>
            <span class="month-item item-access" data-value="20">20</span>
            <span class="month-item item-access" data-value="21">21</span>
            <span class="month-item item-access" data-value="22">22</span>
            <span class="month-item item-access" data-value="23">23</span>
            <span class="month-item item-access" data-value="24">24</span>
            <span class="month-item item-access" data-value="25">25</span>
            <span class="month-item item-access" data-value="26">26</span>
            <span class="month-item item-access" data-value="27">27</span>
            <span class="month-item item-access" data-value="28">28</span>
        </div>
    </div>
</script>

<script>
    var comValues = null;
    $(document).ready(function () {
        init();
        $.ajax({
            url: "/admin/api/v1/getDBBackupInfo",
            success: function (data) {
                var result = data.data;
                if (result == null) {
                    $('#planBox').html($('#week').html());
                    banInput();
                    planBoxBind();
                } else {
                    $('#planBox').html($('#' + result.complete.type).html());

                    if (result.isEnable == true) {
                        $('input[type=checkbox]').attr({"checked": "checked", "data-state": true});
                    } else {
                        banInput();
                        planBoxBind();
                    }

                    $("#typeSelect").val(result.complete.type).trigger("change");

                    var comValue = result.complete.value;

                    comValues = comValue;

                    $.each(comValue, function (i, value) {
                        $('#planBox .item-access[data-value=' + value + ']').addClass('item-checked');
                    });

                    $("#timeSelect").val(result.complete.time).trigger("change");

                    if (result.differences.value.length > 0) {
                        var diffValue = result.differences.value;

                        $.each(diffValue, function (i, value) {
                            $('#diffPlanBox .item-access[data-value=' + value + ']').addClass('item-checked');
                        });

                        $("#diffTimeSelect").val(result.differences.time).trigger("change");
                    }

                }
            }
        });

    });

    function init() {
        $("#typeSelect").select2({
            minimumResultsForSearch: Infinity
        });

        $("#typeSelect").val('week').trigger('select2:select');

        $("#diffPlanBox").html($("#week").html());
        $('#diffPlanBox .item-access').bind('click', function () {
            $(this).hasClass('item-checked') ? $(this).removeClass('item-checked') : $(this).addClass('item-checked');
        });

        $('.datepicker').datepicker({
            format: "yyyy-mm-dd",
            autoclose: true,
            startDate: new Date(),
            todayHighlight:true
        });

        $('#timeSelect').select2({
            minimumResultsForSearch: Infinity
        }).on('select2:select', function () {

        });

        $('#diffTimeSelect').select2({
            minimumResultsForSearch: Infinity
        }).on('select2:select', function () {

        });

        $('input[type=checkbox]').click(function () {
            if ($(this).prop("checked")) {
                $(this).data("state", true);
                $('.boxMask').remove();
            } else {
                $(this).data("state", false);
                banInput();
            }
        });

        $("#sure").click(function () {
            var comPlans = $("#planBox").find(".item-checked");
            var comValue = [];
            $.each(comPlans, function (index, plan) {
                comValue.push($(plan).data("value"));
            });

            if (comValue.length == 0) {
                swal("Error", '<spring:message code="label.admin.data.backup.fullBackup.not.empty"/>', 'error');
                return;
            }

            var checkState = $('input[type=checkbox]').data("state");
            var comType = $("#typeSelect").val();
            var comTime = $("#timeSelect").val();
            var diffTime = $("#diffTimeSelect").val();
            var diffPlans = $("#diffPlanBox").find(".item-checked");
            var diffValue = [];
            $.each(diffPlans, function (index, plan) {
                diffValue.push($(plan).data("value"));
            });

            var startTime = new Date().getTime();

            var data = {
                isEnable: checkState,
                startTime: startTime,
                complete: {
                    type: comType,
                    time: comTime,
                    value: comValue
                },
                differences: {
                    type: "week",
                    time: diffTime,
                    value: diffValue
                }
            };

            $.ajax({
                url: "/admin/api/v1/config/DBBackup",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (result) {
                    if (result.result == "SUCCESS") {
                        swal({
                            title: '<spring:message code="label.success.operation"/>',
                            text: "",
                            type: "success",
                            showCancelButton: false,
                            showConfirmButton: true,
                            confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                            animation: "slide-from-top"
                        }, function () {
                            $('#service_list').DataTable().ajax.reload();
                        });
                        swal({
                            title:"<spring:message code="label.success"/>",
                            text:'<spring:message code="label.admin.data.backup.plan.set.success"/>',
                            type:"success",
                            showCancelButton:false,
                            showConfirmButton:true,
                            animation:"slide-from-top"
                        },function(){
                            window.location.replace("/admin/dbManager/page#backupSetting");
                        });
                    } else {
                        swal("Error", result.message, "error")
                    }
                }
            })
        })
    }

    function changeTime(_this) {
        $('#planBox').html("");
        var temp = $('#' + $(_this).val()).html();
        $('#planBox').html(temp);
        planBoxBind();
        if (comValues != null) {
            $.each(comValues, function (i, value) {
                $('#planBox .item-access[data-value=' + value + ']').addClass('item-checked');
            });
        }
    }

    function banInput() {
        var temp = $('#maskTemplate').html();
        $('.box-primary').each(function () {
            var $temp = $(temp);
            $(this).append($temp.css('height', $(this).height() + 3));
        });
    }

    function planBoxBind() {
        $('#planBox .item-access').bind('click', function () {
            $(this).hasClass('item-checked') ? $(this).removeClass('item-checked') : $(this).addClass('item-checked');
        });
    }
</script>
